<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非父子间传值(Bus/总线/发布订阅模式/观察者模式)</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<child content="Dell"></child>
			<child content="Lee"></child>
		</div>
		<script type="text/javascript">
		Vue.prototype.bus = new Vue();
		Vue.component('child',{
			data: function(){
				return {
					selfContent:this.content
				}
			}
			props:{
				content:String
			},
			template:'<div @click="handleClick">{{selfContent}}</div>',
			methods:{
				handleClick : function(){
					this.bus.$emit('change',this.selfContent)
				}
			},
			mounted : function(){
				var this_ = this;
				this.bus.$on('change',function(msg){
					this_.selfContent = msg;
				})
			}
		})
			var vm = new Vue({
				el:'#app'
			});
		</script>
	</body>
</html>
